<template>
  <el-tabs v-model="_activeName">
    <el-tab-pane v-for="(item,index) in tabs" :key="index" :label="item.label" :name="item.name"></el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  props:{
    tabs:{
      type:Array,
      default:()=>{[]}
    },
    activeName:{
      type:String,
      default:""
    }
  },
  computed:{
    _activeName:{
      get(){
        return this.activeName
      },
      set(val){
        if(val != this.activeName){
          this.$emit('tabClick',val)
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-tabs__header{
  margin-bottom: 0 !important;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  .el-tabs__nav-wrap::after{
    background: none;
  }
  .el-tabs__nav-scroll{
    padding: 0 26px;
  }
  .el-tabs__item{
    padding: 0 26px;
    height: 60px;
    line-height: 60px;
    font-size: 16px;
    color: #333;
    &.is-active{
      font-weight: 600;
    }
  }
}
</style>